<template>
	<el-row>
		<el-header style="background-color: white">
			<label class="subtitle"> 淘汰社员 </label>
			<el-form :inline="true" :model="formInline" class="pull-right">
				<el-form-item label="姓名">
					<el-input v-model="formInline.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getLists()">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-header>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="number" label="学号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="department" label="班级">
			</el-table-column>
			<el-table-column prop="major" label="专业">
			</el-table-column>
			<el-table-column prop="phone" label="性别">
			</el-table-column>
			<el-table-column prop="sex" label="联系方式">
			</el-table-column>
			<el-table-column prop="remarks" label="备注">
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="200px">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="详情" placement="top">
						<el-button type="primary" icon="el-icon-tickets" circle size="small" @click="detailUser(scope.$index, scope.row),dialogTableVisible = true"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除" placement="top">
						<el-button type="danger" icon="el-icon-error" circle size="small" @click="refuseUser(scope.$index, scope.row)"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<el-pagination class="pull-right" :current-page="page" :page-sizes="[10, 50, 100, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
		</el-pagination>
		<!-- 查看用户详细信息 -->
		<el-dialog title="新人信息" :visible.sync="dialogTableVisible" width="30%">
			<div style="text-align:center">
				<span>学号:{{userForm.number}}</span><br />
				<span>姓名:{{userForm.name}}</span><br />
				<span>班级:{{userForm.department}}</span><br />
				<span>专业:{{userForm.major}}</span><br />
				<span>联系方式:{{userForm.phone}}</span><br />
				<span>性别:{{userForm.sex}}</span><br />
				<span>年龄:{{userForm.age}}</span><br />
				<span>申请时间:{{userForm.dateline}}</span><br />
				<span>备注:{{userForm.remarks}}</span><br />
			</div>
		</el-dialog>
	</el-row>
</template>
<script>
	export default {
		data() {
			return {
				page: 1,
				total: 10,
				tableData: [],
				formInline: {
					name: ''
				},
				userForm: {
					number: 0,
					name: "",
					department: "",
					major: "",
					phone: "",
					sex: "",
					age: "",
					remarks: "",
					dateline: "",
				},
				dialogTableVisible: false
			}
		},
		methods: {
			//--------------------------------------------------------------------
			//查看用户详情
			//--------------------------------------------------------------------
			detailUser(index, row) {
				this.userForm.number = row.number
				this.userForm.name = row.name
				this.userForm.department = row.department
				this.userForm.major = row.major
				this.userForm.phone = row.phone
				this.userForm.sex = row.sex
				this.userForm.age = row.age
				this.userForm.remarks = row.remarks
				this.userForm.dateline = row.dateline
			},
			
			//--------------------------------------------------------------------
			//更新页面数据
			//--------------------------------------------------------------------
			getLists() {
				this.$axios({
					method: 'get',
					url: '/user/data',
					params: {
						type: 0,
						name: this.formInline.name.trim(),
						page: this.page,
					}
				}).then(res => {
					this.tableData = res.data.data
					this.total = res.data.total
				}).catch(err => {
					this.$message(err)
				})
			},
			//--------------------------------------------------------------------
			//删除用户
			//--------------------------------------------------------------------
			refuseUser(index, row) {
				this.$confirm('此操作将删除此用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'DELETE',
						url: '/user/remove/'+row.id
					}).then(res => {
						if (res.data.state == true) {
							this.$message("删除成功")
							this.getLists()
						} else {
							this.$message("删除失败")
						}
					}).catch(err => {
						this.$message(err)
					})
				})

			},
			//--------------------------------------------------------------------
			//更新当前条数并刷新当前页面数据
			//--------------------------------------------------------------------
			handleSizeChange(total) {
				this.total = total
				this.getLists()
			},
			//--------------------------------------------------------------------
			//更新当前条页并刷新当前页面数据
			//--------------------------------------------------------------------
			handleCurrentChange(page) {
				this.page = page
				this.getLists()
			}
		},
		created() {
			//--------------------------------------------------------------------
			//初始化页面数据
			//--------------------------------------------------------------------
			this.$axios({
				method: 'get',
				url: '/user/data',
				params: {
					type: 0,
					page: this.page,
					total: this.total,
				}
			}).then(res => {
				console.log(res)
				this.tableData = res.data.data
				this.total = res.data.total
			}).catch(err => {
				this.$message(err)
			})
		}

	}
</script>
